<template>
  <div class="home-wrap">
    <van-nav-bar title="首页" />

    <div class="swipe-wrap">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swperList" :key="item.id">
          <van-image :src="item.url" class="img" />
        </van-swipe-item>
      </van-swipe>

      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        background="transparent"
        shape="round"
      />
    </div>

    <van-grid>
      <van-grid-item text="每日福利">
        <template #icon>
          <img
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
            alt=""
            style="width: 50px; height: 50px"
          />
        </template>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="热销榜" />
      <van-grid-item icon="photo-o" text="每日福利" />
      <van-grid-item icon="photo-o" text="热销榜" />
    </van-grid>

    <div class="tags-wrap">
      <div class="tag" @click="goToTags(1)">全球奶粉</div>
      <div class="tag" @click="goToTags(2)">尿不湿</div>
      <div class="tag" @click="goToTags(3)">营养辅食</div>
      <div class="tag" @click="goToTags(4)">宝宝洗护</div>
    </div>

    <div class="recommed">
      <van-card
        v-for="item in recommedList"
        :key="item.id"
        :title="item.product_name"
        :thumb="item.product_img"
        :origin-price="item.product_price"
        @click="goToDetail(item.id)"
      >
        <template #price>
          <span style="color: red">{{ item.product_vip_price }}</span>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { getSwper, getRecommed, getDetail } from "@/api/api";

export default {
  data() {
    return {
      swperList: [],
      value: "",
      recommedList: [],
      total: 0,
    };
  },
  mounted() {
    this.getSwperList();
    this.getRecommedList();
  },
  methods: {
    async getSwperList() {
      const res = await getSwper();
      this.swperList = res.data;
    },
    async getRecommedList() {
      const res = await getRecommed({ page: 1 });
      this.recommedList = res.data;
      this.total = res.total;
    },
    goToTags(n) {
      this.$router.push("/tags/" + n);
    },
    goToDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style lang="less">
.home-wrap {
  .my-swipe .van-swipe-item {
    height: 220px;
    background-color: #39a9ed;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .van-swipe__indicator {
    width: 16px;
    height: 3px;
    background-color: #fff;
    border-radius: 0;
  }

  .swipe-wrap {
    position: relative;

    .van-search {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      .van-search__content {
        background-color: rgba(255, 255, 255, 0.4);
      }
      .van-field__control::placeholder {
        color: #fff;
      }
    }
  }

  .tags-wrap {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-color: #fff;

    .tag {
      width: 165px;
      height: 120px;
      background-color: lightcyan;
      margin-top: 15px;
    }
  }

  .recommed {
    background-color: #fff;
    margin-top: 20px;

    .van-card {
      background-color: #fff;
    }
  }
}
</style>
